<template>
    <div class="content">
        <div class="c2c-wrap">
            <div class="c2c-detail boxShadow">
                <div class="c2c-user-img">
                    <img :src="photo?photo:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522128922672&di=f8c5881b28ec1164a3f983fc98883a06&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fitem%2F201410%2F04%2F20141004212538_SXjWV.jpeg'"
                        alt="">
                </div>
                <h3 class="user-name">{{detailData.userName}}</h3>
                <p class="price">{{detailData.entrustPrice}} CNY／{{detailData.coinCore}}</p>
                <div class="c2c-detail-button">
                    <a href="javascript:;" class="btn btn-type1">{{'TRADE'|t}} {{detailData.dealNum}}</a>
                    <a href="javascript:;" class="btn btn-type2">{{'PRAISE'|t}}90%</a>
                    <a href="javascript:;" class="btn btn-type3">{{detailData.receivablesTypes|t}}</a>
                </div>
            </div>
        </div>
        <div class="c2c-wrap ">
            <div class="boxShadow c2c-item-wrap">
                <div class="c2c-item">
                    <span>{{'OFFER'|t}}：</span>
                    <span class="active">{{detailData.entrustPrice}} {{detailData.coinCore}}</span>
                </div>
                <div class="c2c-item" v-show='!disableBool'>
                    <span>{{'TRADE_QUOTAS'|t}}：</span>
                    <span>{{detailData.entrustMinPrice}}～{{detailData.entrustMaxPrice}} {{detailData.coinCore}}</span>
                </div>
                <div class="c2c-item">
                    <span>{{$route.query.type == '0'?$t('PAGEMENT_METHOD'):$t('PAGEMENT_METHODS')}}：</span>
                    <span>{{detailData.receivablesTypes|t}}</span>
                </div>
                <div class="c2c-item">
                    <span>{{$route.query.type == '0'?$t('PAYMENT_TERM'):$t('PAYMENT_TERMS')}}</span>
                    <span>30 {{'MINUTE'|t}}</span>
                </div>
                <div class="c2c-item" v-show='disableBool'>
                    <span>{{'MY_ACCOUNT'|t}}：</span>
                    <span>{{$route.query.type == '0' ? detailData.buyUserName : detailData.sellUserName}}</span>
                </div>
                <div class="c2c-item" v-show='disableBool'>
                    <span>{{'ACCOUNT_OF_THE_OTHER'|t}}：</span>
                    <span>{{$route.query.type == '0' ? detailData.sellUserName: detailData.buyUserName}}</span>
                </div>
                <div class="c2c-item" v-show='disableBool'>
                    <span>{{'MY_TRADING_ACCOUNT'|t}}：</span>
                    <span>{{$route.query.type == '0' ? detailData.buyAccount : detailData.sellAccount}}</span>
                </div>
                <div class="c2c-item" v-show='disableBool'>
                    <span>{{'TRADE_ACCOUNT'|t}}：</span>
                    <span>{{$route.query.type == '0' ? detailData.sellAccount : detailData.buyAccount}}</span>
                </div>
                <div class="c2c-item-desc" v-show="!disableBool">{{'NOTE_INFO'|t}}：{{detailData.remark}}</div>
            </div>
        </div>
        <div class="c2c-wrap">
            <div class="form">
                <zx-form-group>
                    <zx-input v-model="tradeForm.price" type="number" :place="$route.query.type=='sell'?$t('WANT_SELL_PALCE'):$t('WANT_BUY_PALCE')"
                        ref="price" :rules="rules.price" class="form-input-private" :disabled='disableBool'>
                        <span class="input-text-pos" slot="text">CNY/{{detailData.coinCore}}</span>
                    </zx-input>
                </zx-form-group>
                <div class="text-c mt-10">
                    <i class="form-icon"></i>
                </div>
                <zx-form-group>
                    <zx-input v-model="tradeForm.num" type="number" :place="$t('NUM_PLACE')" ref="num" :rules="rules.num" class="form-input-private"
                        :disabled='disableBool'>
                        <span class="input-text-pos" slot="text">{{detailData.coinCore}}</span>
                    </zx-input>
                </zx-form-group>
                <zx-form-group class="boxShadow" v-show='!disableBool'>
                    <zx-select v-model='tradeForm.bankId' ref="bankId" :rules="rules.bankId" :place="$t('BANK_NUM')" v-show='detailData.receivablesType=="1"'>
                        <zx-option :value="item.id" v-for="(item,key) of bankList" :key='key'>{{item.bank_num}} {{item.bank}}</zx-option>
                    </zx-select>
                    <zx-input v-model="aliAccount" type="text" :place="$t('ALIPAY')" class="form-input-private" v-show='detailData.receivablesType=="2"'
                        disabled>
                    </zx-input>
                    <zx-input v-model="wechatAccount" type="text" :place="$t('WECHAT')" class="form-input-private" v-show='detailData.receivablesType=="3"'
                        disabled>
                    </zx-input>
                </zx-form-group>
                <zx-form-group v-show='!disableBool'>
                    <input type="submit" class="submit-btn mt-20 green-btn radius" :value="$route.query.type=='sell'?$t('SELL_IMMEDIATELY'):$t('PURCHASE_IMMEDIATELY')"
                        @click="submitForm('tradeForm')">
                </zx-form-group>
            </div>
        </div>
        <zx-pass-mask v-model='showBool' @submit="getPass"></zx-pass-mask>
    </div>
</template>
<script>
    import { Form, Func, Auth, Rules } from '@/providers';
    import { C2c, Coins } from '@/services';
    import passMask from '@/components/pass-mask';
    export default {
        data() {
            return {
                showBool: false,
                disableBool: false, // 判断是否禁止输入框
                tradeForm: {
                    price: '',
                    num: '',
                    bankId: '0'
                },
                passForm: {
                    pass: ''
                },
                rules: Rules,
                aliAccount: Auth.getItem('alipay'),
                wechatAccount: Auth.getItem('weixin'),
                detailData: {},
                photo: 'http://up.qqya.com/allimg/201710-t/17-101804_132321.jpg',
                bankList: []
            };
        },
        methods: {
            // 表单提交
            async getPass(val) {
                let _tradeForm = this.tradeForm;
                try {
                    let res = await C2c.SpotTrade({
                        entrustNo: this.$route.query.id,
                        tradePrice: _tradeForm.price,
                        tradeNum: _tradeForm.num,
                        bankId: _tradeForm.bankId,
                        dealPwd: Func.PasswordEncrypt(val),
                        userNo: Auth.getItem('userId'),
                        token: Auth.getItem('token')
                    });
                    if (!Form.checkResToken(res, true)) return false;
                    Form.Totas(res.desc, () => {
                        this.$router.push('/manage/order');
                    });
                } catch (error) {
                    console.log(error);
                }
            },
            // 表单校验
            async submitForm(formName) {
                if (!Form.validataForm(this, formName)) {
                    return false;
                }
                this.showBool = true;
            },
            // 获取银行卡列表
            async GetUserBank() {
                try {
                    let res = await C2c.GetUserBank({
                        userNo: Auth.getItem('userId')
                    });
                    this.bankList = res.data;
                } catch (error) {
                    console.log(error);
                }
            },
            // 获取详情【入口在，c2c->我要购买、我要出售】
            async GetSpotEntrustById() {
                try {
                    let res = await C2c.GetSpotEntrustById({
                        token: Auth.getItem('token'),
                        id: this.$route.query.id
                    });
                    this.detailData = res.data;
                    let map = new Map();
                    map.set(1, 'BANKS').set(2, 'ALIPAYS').set(3, 'WECHATS');
                    this.detailData.receivablesTypes = map.get(this.detailData.receivablesType);
                    this.photo = this.detailData.photo;
                } catch (error) {
                    console.log(error);
                }
            },
            // 获取订单详情【入口在：管理->我的订单】
            async GetSpotDealDetailById() {
                try {
                    let res = await C2c.GetSpotDealDetailById({
                        dealNo: this.$route.query.dealNo,
                        userNo: Auth.getItem('userId')
                    });
                    this.detailData = res.data.spotDealDetail;
                    let _res = this.detailData;
                    let map = new Map();
                    map.set(1, 'BANKS').set(2, 'ALIPAYS').set(3, 'WECHATS');
                    _res.receivablesTypes = map.get(_res.receivablesType);
                    this.tradeForm = {
                        price: _res.dealPrice,
                        num: _res.dealNum,
                        bankId: _res.type == '0' ? _res.buyAccount : _res.sellAccount
                    };
                    this.photo = this.$route.query.type == '0' ? _res.sellUserPhoto : _res.buyUserPhoto;
                    _res.userName = this.$route.query.type == '0' ? _res.sellUserName : _res.buyUserName;
                } catch (error) {
                    console.log(error);
                }
            },
            getData() {
                if (this.$route.query.id) {
                    this.GetSpotEntrustById();
                    this.GetUserBank();
                } else {
                    this.disableBool = true;
                    this.GetSpotDealDetailById();
                }
            }
        },
        components: {
            'zx-pass-mask': passMask
        },
        created() {
            this.getData();
        }
    };
</script>
<style lang="scss" scoped>
    .input-text-pos {
        position: absolute;
        right: 1rem;
        color: rgba(77, 79, 81, 1);
    }

    @import "../../assets/sass/c2c.scss";
</style>